<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>小工匠订单管理系统</title>

    <link href="<%=path%>/resources/css/style.css" rel="stylesheet">
    <link href="<%=path%>/resources/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="<%=path%>/resources/js/html5shiv.js"></script>
    <script src="<%=path%>/resources/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <%@ include file="/page/common/leftmenu.jsp" %>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <%@ include file="/page/common/top.jsp" %>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>

            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">管理平台</a>
                </li>
                <li class="active">账户管理</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <section class="wrapper">
            <!-- page start-->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel">
                        <div class="panel-heading" style="background-color: transparent">
                            <h3 class="panel-title">条件筛选</h3>
                        </div>
                        <div class="panel-body toolbar">
                            <div class="row">
                                <div class="col-md-1" style="width:120px">
                                    <label> 状态：</label>
                                </div>
                                <div class="col-md-4">
                                    <label class="checked">全部 <input name="stateRadio" type="radio" value="0"
                                                                     checked="checked"></label>
                                    <label>正常 <input name="stateRadio" type="radio" value="1"></label>
                                    <label>已冻结 <input name="stateRadio" type="radio" value="2"></label>
                                </div>
                            </div>
                            <p>&nbsp;</p>
                            <div class="row">
                                <div class="col-md-1" style="margin-top: 5px;width:130px">
                                    <label>昵称/手机号：</label>
                                </div>
                                <div class="col-md-2 input-group" style="margin-left: 20px">
                                    <input id="searchKey" class="form-control" type="text" placeholder="请输入关键词">
                                    <span class="input-group-btn">
                                        <button type="button"  onclick="search()" class="btn btn-primary">查询</button>
                                        </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table table-striped table-hover table-bordered" id="editable-sample">
                <div class="table-responsive" data-pattern="priority-columns" data-focus-btn-icon="fa-asterisk"
                     data-sticky-table-header="true" data-add-display-all-btn="true" data-add-focus-btn="true">
                    <table id="table" data-unique-id="id"
                           data-pagination="true"
                           data-id-field="id"
                           data-maintain-selected="true"
                           data-page-size="10"
                           data-page-list="[5,10,15,20]"
                           data-side-pagination="server">
                    </table>
                </div>
            </div>
            <!-- page end-->
        </section>


        <!--body wrapper end-->

        <!--footer section start-->
        <%@ include file="/page/common/footer.jsp" %>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="<%=path%>/resources/js/jquery-1.10.2.min.js"></script>
<script src="<%=path%>/resources/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="<%=path%>/resources/js/jquery-migrate-1.2.1.min.js"></script>
<script src="<%=path%>/resources/js/bootstrap.min.js"></script>
<script src="<%=path%>/resources/js/bootstrap.min.js"></script>
<script src="<%=path%>/resources/js/bootstrap-table.js"></script>

<script src="<%=path%>/resources/js/modernizr.min.js"></script>
<script src="<%=path%>/resources/js/jquery.nicescroll.js"></script>

<!--common scripts for all pages-->
<script src="<%=path%>/resources/js/scripts.js"></script>


<script src="<%=path%>/resources/js/common.js"></script>
<script>
    var offset = -1;
    var $table = $('#table'), selections = [];
    $(function () {
        initData();
    });

    /*初始化表格数据*/
    function initData() {
        $('#table').bootstrapTable({
            url: "<%=path %>/admin/user/user_select.do",
            clickToSelect: 'true',//选中一行
            queryParams: queryParams,
            columns: [{
                field: 'checked',
                checkbox: true
            }, {
                field: 'mobile',
                title: '手机号',
                width: '150'
            }, {
                field: 'nickName',
                title: '昵称',
                width: '150'
            }, {
                field: 'email',
                title: '邮箱',
                width: '150'
            }, {
                field: 'crtTime',
                title: '注册时间',
                width: '250',
                formatter: 'timeFormatter'
            }, {
                field: 'state',
                title: '状态',
                width: '150',
                formatter: 'stateFormatter',//定义状态
                events: operateEvents
            }],
            onClickRow: function (row) {//detail
                window.location.href = "<%=request.getContextPath() %>/user/toUserDetail.do?id=" + row.id;
            },
        });
    }
    window.operateEvents = {
        'click .detail': function (e, value, row, index) {
            window.location.href = "<%=basePath %>/user/toUserDetail.do?id=" + row.id;
        }
    };

    /*刷新*/
    function search() {
        offset = 0;
        $table.bootstrapTable('refresh');
    }

    /**封装查询条件**/
    function queryParams(params) {
        if (offset == 0) {
            params.offset = offset;
        }
        offset = -1;
        var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,  //页面大小
            offset: params.offset, //页码
            state: $("input[name='stateRadio']:checked").val(),
            searchKey: $("#searchKey").val(),
            maxrows: params.limit,
            pageindex: params.pageNumber
        };
        return temp;
    }
    jQuery(document).ready(function($)
    {
        selectEffect("admin/user/user_list.do");
    });
</script>

</body>
</html>

